import { Meta } from "@storybook/blocks";

export const RightArrow = () => <svg 
    viewBox="0 0 14 14" 
    width="8px" 
    height="14px" 
    style={{ 
      marginLeft: '4px',
      display: 'inline-block',
      shapeRendering: 'inherit',
      verticalAlign: 'middle',
      fill: 'currentColor',
      'path fill': 'currentColor'
    }}
>
  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
</svg>


<Meta title="起步/Intro 简介" />

# 📦简介 Introduction
atian-ui 是一个基于 React 的组件库，提供了一系列常用的 UI 组件。提供了常用的组件和工具，帮助开发者快速构建现代化的用户界面。它的设计理念是简洁、易用和高效，旨在提高开发效率和用户体验。
## 😏主要特性 Features
- **易于使用**：atian-ui 提供了简单易用的 API 和文档，帮助开发者快速上手。
- **可定制**：atian-ui 支持主题定制和样式覆盖，允许开发者根据项目需求进行个性化定制。
- **响应式设计**：atian-ui 采用响应式设计，确保在不同屏幕尺寸和设备上都能良好显示。
- **文档齐全**：atian-ui 提供了详细的文档和示例，帮助开发者快速理解和使用组件。
- **组件还算丰富**：atian-ui 提供了丰富的组件库，涵盖了常用的 UI 组件，如按钮、输入框、表格等。
- **设计一致性**：atian-ui 遵循一致的设计规范，确保组件在不同场景下的外观和行为一致。
- **易于扩展**：atian-ui 允许开发者根据项目需求扩展和定制组件，满足特定的业务需求。
- **支持 TypeScript**：atian-ui 提供了 TypeScript 类型定义，帮助开发者在使用过程中获得更好的类型检查和代码提示。
- **支持多种主题**：atian-ui 提供了多种主题和样式，开发者可以根据项目需求选择合适的主题。
- **支持多种平台**：atian-ui 支持多种平台和设备，包括桌面、移动端和 Web 应用。

## 🛠️安装
``` bash
# npm
npm install atian-ui
# yarn
yarn add atian-ui
# pnpm
pnpm add atian-ui
```

## 🐿️使用说明
```javascript
import { Button } from 'atian-ui';
import 'atian-ui/dist/index.css';
function App() {
  return (
    <div>
      <Button type="primary">Hello World</Button>
    </div>
  );
}
```

## 😶‍🌫️主要组件 Main Components

| 组件 | 使用  |
| - | :- |
| Button 按钮 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |
| Menu 菜单 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |
| Alert 提示 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |
| Transition 过渡 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |
| Card 卡片 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |
| Icon 图标 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |
| Tabs 标签页 | <a href={window.location.origin+'?path='+'/docs/组件-button-按钮--使用说明-docs'}>使用</a> |


## 🙆组件开发进度

- [☑️] Button 按钮
- [☑️] Alert 提示
- [☑️] Transition 过渡
- [☑️] Card 卡片
- [☑️] Input 输入框
- [☑️] Select 下拉框
- [☑️] AutoComplete 自动完成
- [☑️] Tabs 标签页
- [☑️] Icon 图标  FontAwesome
- [☑️] Menu 导航菜单
- [❌] Grid 栅格
- [❌] Layout 布局
- [❌] Table 表格
- [❌] Pagination 分页
- [❌] Toast 轻提示
- [❌] Message 消息提示
- [❌] Dialog 对话框
- [❌] Drawer 抽屉
- [❌] Switch 开关
- [❌] Radio 单选框
- [❌] Checkbox 多选框
- [❌] Menu 菜单
- [❌] TimePicker 时间选择器
- [❌] DatePicker 日期选择器
- [❌] Upload 上传
- [❌] Rate 评分
- [❌] Progress 进度条
- [❌] Skeleton 骨架屏
- [❌] Breadcrumb 面包屑
- [❌] Steps 步骤条
- [❌] Collapse 折叠面板
- [❌] Carousel 轮播图
- [❌] Collapse 折叠面板
- [❌] Cascader 级联选择器
- [❌] Transfer 穿梭框
- [❌] Calendar 日历
- [❌] ColorPicker 颜色选择器
- [❌] Form 表单
- [❌] InputNumber 数字输入框
- [❌] FormItem 表单项

<style>
  {`

  `}
</style>
